<template>
    <mu-container>
        <mu-card style="width: 80%; margin: 5rem auto;padding: 3rem 2rem;">
            <mu-form ref="form" :model="validateForm" class="mu-demo-form">
                <mu-form-item label="用户名" help-text="" prop="user_name" :rules="user_nameRules">
                    <mu-text-field v-model="validateForm.user_name" prop="user_name"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="密码" prop="password" :rules="passwordRules">
                    <mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
                </mu-form-item>
                <mu-form-item prop="isAgree" :rules="argeeRules">
                    <mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
                </mu-form-item>
                <mu-form-item>
                    <mu-button color="primary" @click="submit">提交</mu-button>
                    <mu-button @click="clear">重置</mu-button>
                </mu-form-item>
            </mu-form>
        </mu-card>
    </mu-container>
</template>
<script>
    export default {
        data () {
            return {
                user_nameRules: [
                    { validate: (val) => !!val, message: '必须填写用户名'},
                    { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
                ],
                passwordRules: [
                    { validate: (val) => !!val, message: '必须填写密码'},
                    { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10'}
                ],
                argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],
                validateForm: {
                    user_name: '',
                    password: '',
                    isAgree: false
                }
            }
        },
        methods: {
            submit () {
                let $this = this;
                this.$refs.form.validate().then((result) => {
                    if(result){
                        $this.$api.login($this.validateForm,function(resp){
                            if(resp.code == 0){
                                $this.$toast.success(resp.msg);
                                $this.$router.replace("/");
                            }else{
                                $this.$toast.error(resp.msg);
                            }
                        });
                    }
                });
            },
            clear () {
                this.$refs.form.clear();
                this.validateForm = {
                    user_name: '',
                    password: '',
                    isAgree: false
                };
            }
        }
    };
</script>